import React from 'react'
import PropTypes from 'prop-types'
import {Modal, Table, Tooltip} from 'antd'
import classnames from 'classnames'
import {toMessageType, transferMsg} from 'utils'
import {randomColor} from 'config'
import {DropOption} from 'components'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'


const { confirm } = Modal

const List = ({
  onDeleteItem, onLeaveItem, onEditItem, showWxChatModal, isMotion, location, ...tableProps
}) => {

  const columns = [
    {
      title: '聊天内容',
      dataIndex: 'chatContent',
      key: 'chatContent',
      render: (c, r) => <Tooltip title={transferMsg(c, r.msgCategory)}>{c ? transferMsg(c, r.msgCategory).substr(0, 30) : ''}</Tooltip>
    }, {
      title: '查看聊天记录',
      dataIndex: 'detail',
      key: 'detail',
      render: (_, record) => <a href="javascript:;" onClick={() => showWxChatModal(record)}>详情</a>,
    }, {
      title: '归属微信号',
      dataIndex: 'operator',
      key: 'operator.wxId',
      render: val => val ? val.wxNo || val.wxId : "-",
    }, {
      title: '归属员工',
      dataIndex: 'operator',
      key: 'belongEmpName',
      render: val => val ? val.belongEmpName : '-'
    }, {
      title: '消息方向',
      dataIndex: 'msgDirection',
      key: 'msgDirection',
      render: val => val ? '->' : '<-',
    }, {
      title: '好友微信号',
      dataIndex: 'dcustomerWxId',
      key: 'dcustomerWxId',
    }, {
      title: '好友昵称',
      dataIndex: 'customerNickname',
      key: 'customerNickname',
      render: (val, r) => val ? val : r.customer && r.customer.friendNickname ? r.customer.friendNickname : '-',
    }, {
      title: '好友备注',
      dataIndex: 'customerRemark',
      key: 'customerRemark',
      render: (val, r) => val ? val : r.customer && r.customer.friendRemark ? r.customer.friendRemark : '-',
    },
    {
      title: '公司部门',
      dataIndex: 'operator',
      key: 'operator.deptName',
      render: operator => operator ? operator.deptName : "-",
    },
    {
      title: '消息类型',
      dataIndex: 'msgType',
      key: 'msgType',
      render: val => val === 1 ? '个人' : '群组',
    },
    {
      title: '消息分类',
      dataIndex: 'msgCategory',
      key: 'msgCategory',
      render: val => toMessageType(val),
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table, { [styles.motion]: isMotion })}
      scroll={{ x: 1400 }}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: { wrapper: isMotion ? AnimateBody : CommonBody },
      }}
    />
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default List
